<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        watch 能干什么
            1. 监听数据的变化，然后去干些事情
     -->

    <div id="app">
        <p>姓：<input type="text" v-model="firstName"></p>
        <p>名：<input type="text" v-model="lastName"></p>

        <!-- <p>全名：{{ firstName }} {{ lastName }}</p> -->
        <p>全名：{{ fullName }}</p>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                firstName: '',
                lastName: '',

                fullName: '', // 全名
            },
            watch: {
                // key: value
                //  key - 要监听的数据
                //  value - 提供了 handler 函数的 对象
                // firstName: {
                //     handler: function(newVal, oldVal) {
                //         this.fullName = newVal + this.lastName
                //     }
                // },
                firstName: 'aaa',
                lastName: {
                    handler: function(newVal, oldVal) {
                        this.fullName = this.firstName + newVal
                    }
                },


                // demo
                // 简写
                a: function() {

                },
                a: {
                    handler: function() {

                    },
                }
            },
            methods: {
                aaa: function(newVal, oldVal) {
                    this.fullName = newVal + this.lastName
                }
            }
        })
    </script>
</body>
</html>